<template>
  <div class="normal">
    <div class="top">
      <!--<affix :label="$t('qualityCheck.condition')"></affix>-->
      <div class="tem">
        <span class="temp">{{$t('qualityCheck.qualityTemplateClass')}}：</span>
        <el-radio-group v-model="webOrCallTemp" @change="tempStateChange">
          <el-radio :label="1">{{$t('qualityCheck.qualityTemplateClassCall')}}</el-radio>
          <el-radio :label="2">{{$t('qualityCheck.qualityTemplateClassWeb')}}</el-radio>
        </el-radio-group>
      </div>
      <div class="tem">
        <span class="temp">{{$t('qualityCheck.qualityTemplate')}}：</span>
        <el-select style="margin-left: 42px;" v-model.trim="value" size="mini" v-show="items.length!==0" @change="change">
          <el-option
            v-show="webOrCallTemp === 2?item.QUALITY_TYPE === 'qualityWebchat':item.QUALITY_TYPE !== 'qualityWebchat'"
            v-for="(item, index) in items"
            :key="index"
            :label="item.name"
            :value="index">
          </el-option>
        </el-select>
        <span v-show="items.length===0">{{$t('qualityCheck.pleaseExployModel')}}</span>
        <span class="ui-unfold-span">
          <span @click="isShowFold = false" v-show="isShowFold">{{$t('report.foldedContition')}} <i class="el-icon-arrow-up"></i></span>
          <span @click="isShowFold = true" v-show="!isShowFold">{{$t('report.unfoldedContition')}} <i class="el-icon-arrow-down"></i></span>
        </span>
      </div>
      <Unfold :title="unfoldTitle" :isShow="isShowFold" style="margin-bottom: 20px">
        <template slot="unfoldSlot">
          <div v-if="items.length!==0">
            <!--在线质检查询条件==========================-->
            <div class="sear" v-show="template.QUALITY_TYPE?template.QUALITY_TYPE==='qualityWebchat':webOrCallTemp==2">
              <el-form label-position="top" :inline="true" :model="chatForm" :rules="rules" ref="chatForm"  class="demo-form-inline">
                <el-form-item label="">
                  <el-checkbox v-model="chatForm.skipQuality" @change="skipChange">{{$t('qualityCheck.showSkippedData')}}</el-checkbox>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.createTime')+':'">
                      <el-date-picker size="mini"
                                      v-model.trim="chatForm.createTime"
                                      :id="['c1','c2']"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      :editable="boolean"
                                      :clearable="false"
                                      @change=createTimeChange>
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="">
                    <el-form-item :label="$t('public.agent')+':'">
                      <el-popover
                              ref="popover3"
                              placement="bottom"
                              @show="popoverWebchatShow"
                              v-model.trim="popoverVisableWeb"
                              width="240"
                              trigger="click">
                        <agent-tree :readSeat="followedWebchatAgents" :visable="popoverVisableWeb" ref="agentTreeWebchat" @saveFollowedAgents="saveFollowedWebchatAgents"></agent-tree>
                      </el-popover>
                      <div class="follow-agent-wrap" v-popover:popover3 style="width:calc(100% - 38px);">
                          <span class="follow-agent follow-common" v-for="item in followedWebchatAgents" :key="item._id">{{item.label}}
                            <i class="el-icon-close" @click.stop="closeFollowedWebchatAgents(item._id)"></i>
                          </span>
                        <div>
                          <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.endType')+':'">
                      <!-- <el-select size="mini" v-model.trim="chatForm.finishKey" filterable :placeholder="$t('public.all')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in finishReasonList"
                          :label="item.name"
                          :value="item.key"
                          :key="index"
                        >
                        </el-option>
                      </el-select> -->
                      <el-cascader
                        popper-class="webchat-finish"
                        class="webchatFinish"
                        :options="closeOptions"
                        filterable
                        v-model.trim="activeFinish"
                        change-on-select
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.satisfaction')+':'">
                      <el-select size="mini" v-model.trim="chatForm.appraiseKey" filterable :placeholder="$t('public.all')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option :label="'--'+$t('public.unevaluated')+'--'" value="unevaluated"></el-option>
                        <el-option
                          v-for="(item, index) in appraiseList"
                          :label="item.name"
                          :value="item.key"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.platformSource')+':'">
                      <el-select size="mini" v-model.trim="chatForm.platform" :placeholder="$t('public.all')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                                v-for="(item, index) in platforms"
                                :label="item.label"
                                :value="item.value"
                                :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.takeTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['m1','m2']"
                                      v-model.trim="chatForm.beginTime"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      :editable="boolean"
                                      align="right"
                                      style="margin-left: 0;"
                                      @change=timeChange>
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.queues')+':'">
                      <el-select size="mini" v-model.trim="chatForm.toPeer" filterable :placeholder="$t('qualityCheck.skillGroupSearch')">
                        <el-option
                          v-for="(item, index) in webchatQueueList"
                          :key="index"
                          :label="item.DisplayName"
                          :value="item.Exten">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.msgNum')+':'">
                      <el-radio-group v-model.trim="chatForm.msgCountType" style="margin-left:-18px;">
                        <el-radio size="mini" label="gt" >{{$t('webchat.moreThan')}}</el-radio>
                        <el-radio size="mini" label="lt" >{{$t('webchat.lessThan')}}</el-radio>
                        <el-radio size="mini" label="eq" >{{$t('webchat.equal')}}</el-radio>
                      </el-radio-group>
                      <el-input style="margin-left:20px;width:90px;" size="mini" v-model.trim="chatForm.msgCount" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.customerName')+':'" prop="CUSTOMER_NAME">
                      <el-input size="mini" v-model.trim="chatForm.sName" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 会话ID -->
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.sessionId')" prop="SESSION_ID">
                      <el-input size="mini" v-model.trim="chatForm._id" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <!--<div class="sub">-->
                <!--<el-button class="primary_btn report_excel_btn" @click="rest">{{$t('public.reset')}}</el-button>-->
                <!--<el-button type="primary" class="search primary_btn" @click="query">{{$t('public.search2')}}</el-button>-->
              <!--</div>-->
            </div>
            <!--通话质检查询条件==========================-->
            <div class="sear" v-show="template.QUALITY_TYPE?template.QUALITY_TYPE!=='qualityWebchat':webOrCallTemp==1">
              <!--<p class="p-styl">{{$t('public.searchBadge')}}</p>-->
              <el-form label-position="top" :inline="true" :model="callForm" :rules="rules" ref="callForm"  class="demo-form-inline">
                <el-form-item label="">
                  <el-checkbox v-model="callForm.SKIP_QUALITY" @change="skipChange">{{$t('qualityCheck.showSkippedData')}}</el-checkbox>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.callTime')+':'">
                      <el-date-picker size="mini"
                                      v-model.trim="callForm.beginTime"
                                      :id="['a','b']"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      :editable="boolean"
                                      @change=callTimeChange>
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('call.callType')+':'">
                      <el-select size="mini" v-model.trim="callForm.CONNECT_TYPE" filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in callTypeList"
                          :label="item.code_name"
                          :value="item.code_value"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-show="callAgentShow">
                    <el-form-item :label="$t('qualityCheck.callAgent')+':'">
                      <el-popover
                              ref="popover4"
                              placement="bottom"
                              @show="popoverShow"
                              v-model.trim="popoverVisableCall"
                              width="240"
                              trigger="click">
                        <agent-tree :readSeat="followedAgents" :visable="popoverVisableCall" ref="agentTree" @saveFollowedAgents="saveFollowedAgents"></agent-tree>
                      </el-popover>
                      <div class="follow-agent-wrap" v-popover:popover4  style="width:calc(100% - 38px);">
                        <span class="follow-agent follow-common" v-for="item in followedAgents" :key="item._id">{{item.label}}
                          <i class="el-icon-close" @click.stop="closeFollowedAgents(item._id)"></i>
                        </span>
                        <div>
                          <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.queues')+':'">
                      <el-select size="mini" v-model.trim="callForm.ERROR_MEMO" filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in callQueueList"
                          :label="item.DisplayName"
                          :value="item.Exten"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.callingNumber')+':'" prop="CALL_NO">
                      <el-input size="mini" v-model.trim="callForm.CALL_NO" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.calledNumber')+':'" prop="CALLED_NO">
                      <el-input size="mini" v-model.trim="callForm.CALLED_NO" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="$t('public.satisfaction')+':'">
                      <!--<el-select size="mini" v-model.trim="callForm.INVESTIGATE" filterable :placeholder="'&#45;&#45;'+$t('webchat.webchatAll')+'&#45;&#45;'+':'">-->
                        <!--<el-option :label="'&#45;&#45;'+$t('webchat.webchatAll')+'&#45;&#45;'" value=""></el-option>-->
                        <!--<el-option-->
                          <!--v-for="(item, index) in satisfactionList"-->
                          <!--:label="item.name"-->
                          <!--:value="item.value"-->
                          <!--:key="index"-->
                        <!--&gt;-->
                        <!--</el-option>-->
                      <!--</el-select>-->
                      <!--二级满意度-->
                      <!--{{investigateArray}}-->
                      <el-cascader
                        style="width:100%;"
                        :options="investigateArray"
                        v-model.trim="INVESTIGATE"
                        change-on-select
                        @change="changeData(INVESTIGATE)"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item prop="CALL_TIME_LENGTH_BEGIN" :label="$t('qualityCheck.callTimeMin')+':'">
                      <el-input v-model.trim="callForm.CALL_TIME_LENGTH_BEGIN">
                        <!--<template slot="append">{{$t('public.seconds')}}</template>-->
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="CALL_TIME_LENGTH_END" :label="$t('qualityCheck.callTimeMax')+':'">
                      <el-input v-model.trim="callForm.CALL_TIME_LENGTH_END">
                        <!--<template slot="append">{{$t('public.seconds')}}</template>-->
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.callLabel')+':'">
                      <div class="label-select-wrap">
                        <label-cascader @labelSelect="labelSelect" :isNoLabel="true" :resetSelect="resetSelect" :needType="true"></label-cascader>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('call.repeatCall')+':'">
                        <el-select size="mini" v-model="callForm.REPEAT_CALL" multiple :placeholder="$t('webchat.webchatAll')">
                          <el-option :label="$t('call.repeatCall24hNum')" value="24h"></el-option>
                          <el-option :label="$t('call.repeatCall48hNum')" value="48h"></el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </template>
      </Unfold>
      <div class="sub">
        <el-button class="primary_btn" @click="rest">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click="queryList">{{$t('public.search2')}}</el-button>
      </div>
      <affix :label="$t('public.searchResult')"></affix>
      <!-- 通话质检 -->
      <call-grade :callDialogShow="callDialogShow" v-if="callIsShow" @close="off" :flagId="flagId" :currentItemCall = "this.currentItemCall"  :currentGrade = "{}"  :template = "this.template" @saveGrade="saveGrade" @nextGrade="nextGrade" :qcResectLabel="qcResectLabel" @off="off" @handle="handle" :refreshCallGrade="refreshCallGrade"></call-grade>
      <!-- 在线客服质检 -->
      <webchat-grade :webchatDialogShow="webchatDialogShow" v-if="webChatIsShow" @close="off" :currentItemWebchat="this.currentItemWebchat" :currentItem = "this.currentItem" :currentGrade = "{}" :template = "this.template" @off="off" @saveGrade="saveGrade" @nextGrade="nextGrade"></webchat-grade>
      <big-image :imgInfo="bigImage" @closeImageDialog="closeBigImage"></big-image>
    </div>
    <div class="tables" v-show="!isHaveData" v-loading="callLoading || webLoading">
      <div class="deploy">
        <div class="table-header-config">
          <i class="iconfont icon-peizhi"></i>
          <span class="tex" @click.stop="setHeaderConfig">{{$t('report.setHeaderConfig')}}</span>
        </div>
        <div class="search-pagination">
          <pagination
                  :moreFlag="moreNorFlag"
                  :allCount="allCount"
                  :small="pagination.small"
                  :currentPage="pagination.currentPage"
                  :count="count"
                  @turnPage="turnPage"
                  :noJump="true"
                  :totalPage="totalPage"
                  @getAllCount="getAllCount"
                  >
          </pagination>
        </div>
      </div>
      <!--通话  在线通用table-->
      <base-table :tableData="tableData" :options="tableDataHeader.Config" @grade="handle" @viewLook="look"></base-table>
    </div>
    <!--<div v-show="isHaveData" style="text-align: center;padding: 20px;">-->
      <!--{{$t('public.noData')}}-->
    <!--</div>-->
    <!--查看日志-->
    <div class="looklog">
        <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :visible.sync="isShow" :title="title">
          <div class="tables">
          <div class="deploy">
            <div class="search-pagination">
              <pagination
                      :small="paginationRecord.small"
                      :currentPage="paginationRecord.currentPage"
                      :count="countRecord"
                      @turnPage="turnPageRecord"
                      :totalPage="totalPageRecord"
                      >
              </pagination>
            </div>
          </div>
          <el-table :data="recordList" size="mini">
            <el-table-column prop="user" :label="listenpp" width="">
            </el-table-column>
            <el-table-column prop="" label="" width="">
            </el-table-column>
            <el-table-column prop="time" :label="listenTime" width="">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
    <!--配置表头-->
    <header-option v-show="isShowTableConfig" :show="isShowTableConfig" :option="headOptions" :type="tableConfigType" v-on:close="closeTableConfig"></header-option>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import {deepClone, getDateTime, getCache, scopeAgents, m7Language, getFormatDateTime, updateAllOptions, initFinishName, isHasFunc} from '@/utils/m7Utils.js'
  import {checkform} from '@/utils/validate.js'
  import item from './item'
  import WebchatGrade from './WebchatGrade'
  import BigImage from '@/components/public-modules/bigImage/BigImage'
  import CallGrade from './CallGrade'
  import LabelCascader from '@/components/public-modules/phone-bar/LabelCascader.vue'
  import Affix from '../../../ui-modules/affix/Affix.vue'
  import Unfold from '../../../ui-modules/unfold/index.vue'
  import headerOption from '../../report/base/headerOption.vue'
  import AgentTree from '../base/qualityAgentTree.vue'
  import BaseTable from '../base/BaseTable.vue'
  import bus from '@/store/eventBus'
  export default {
    name: 'normal',
    props: {
      refresh: String
    },
    data () {
      let validate1 = (rule, value, callback) => {
        if (value !== '') {
          let match = checkform(value, 'Number3')
          if (match) {
            callback(new Error(this.$t('qualityCheck.pleaseEnterRightNum')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      let validate2 = (rule, value, callback) => {
        if (value !== '') {
          let match = checkform(value, 'Number3')
          if (match) {
            callback(new Error(this.$t('qualityCheck.pleaseEnterPositiveInteger')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        allCount: 0,
        callPages: 0,
        chatPages: 0,  //   翻页   morePage相关
        qu: {},
        moreNorFlag: false,
        moreWebFlag: false,
        webOrCallTemp: 1,
        value: 100000,
        once: true,
        num: 0,
        isHaveData: false,  //   暂无数据 提示框 是否展示
        isSearchState: false,  //   暂无数据 提示框 是否展示
        boolean: false,
        isSave: false,
        currentIndex: 0,
        webchatDialogShow: false,
        callDialogShow: false,
        qcResectLabel: false,
        isShowTableConfig: false,   //   配置表头
        tableConfigType: 'quality_call_table_title',
        headOptions: {},
        currentItem: {},
        finishOptions: {},          //  在线结束会话类型列表
        currentItemCall: {},
        currentItemWebchat: {},
        chatForm: {
          skipQuality: false,   //   获取被跳过的
          beginTime: '',
          createTime: '',
          finishKey: '',
          user: [],
          appraiseKey: '',
          msgCount: '',
          msgCountType: '',
          platform: '',
          sName:'',
          _id:''
        },
        webchatCustData: {},
        chatInfo: {},
        callForm: {
          SKIP_QUALITY: false,   //  获取被跳过的
          beginTime: '',
          CONNECT_TYPE: '',
          DISPOSAL_AGENT: [],
          ERROR_MEMO: '',
          CALLED_NO: '',
          CALL_NO: '',
          singleLabel: '',
          CALL_TIME_LENGTH_BEGIN: '',
          CALL_TIME_LENGTH_END: '',
          REPEAT_CALL:[]
        },
        investigateArray: [],//  二级满意度数据
        INVESTIGATE: [],  //  二级满意度条件
        template: {},
        isShow: false,
        title: '',
        listenTime: '',
        listenpp: '',
        rules: {
          CALL_NO: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALLED_NO: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALL_TIME_LENGTH_BEGIN: [
            {validator: validate2, trigger: 'blur'}
          ],
          CALL_TIME_LENGTH_END: [
            {validator: validate2, trigger: 'blur'}
          ],
          msgCount: [
            {validator: validate2, trigger: 'blur'}
          ]
        },
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        platforms: [
          {label: this.$t('webchat.websiteCon'), value: 'pc'},
          {label: this.$t('webchat.wapCon'), value: 'wap'},
          {label: this.$t('webchat.appCon'), value: 'sdk'},
          {label: this.$t('webchat.weChatCon'), value: 'weixin'},
          {label: this.$t('webchat.weChatMini'), value: 'wxmini'},
          {label: this.$t('webchat.weBoCon'), value: 'weibo'},
          {label: this.$t('webchat.enterpriseShot'), value: 'wxwork'},
          {label: this.$t('webchat.baiduBCP'), value: 'ocpc'},
          {label: this.$t('webchat.TikTok'), value: 'dy'},
          {label: this.$t('webchat.platformWXKF'), value: 'wxkf'}
        ],
        refreshCallGrade: 0,
        activeFinish: [],
        recordList: [],
        finishReasonList: [],
        agentList: [],
        labelType: 'single',
        sessionOptions: [],
        closeOptions: [],
        labelDataCache: [],
        labelData: {},
        configList: [],
        callTypeList: [],
        callAgentList: [],
        callAgentShow: false,    // 是否有显示座席信息权限
        callQueueList: [],
        webchatQueueList: [],
        appraiseList: [],
        satisfactionList: [],
        items: [],
        pagination: {
          small: false,
          currentPage: 1
        },
        paginationRecord: {
          small: false,
          currentPage: 1
        },
        currentId: '',
        getCallCache: false,
        getWebchatCache: false,
        bigImage: {
          bigImageShow: false,
          url: ''
        },
        resetSelect: false,
        flagId: 'normal',
        countRecord: 0,
        totalPageRecord: 1,
        webLoading: false,
        callLoading: false,
        tableData: [],
        tableDataHeader: {
          Config: [{ 'order': '1', 'name': 'CALL_NO_SHOW', 'displayname': '主叫号码', 'show': true }, { 'order': '2', 'name': 'DISPOSAL_AGENT', 'displayname': '接听座席', 'show': true }, { 'order': '3', 'name': 'CALLED_NO_SHOW', 'displayname': '被叫号码', 'show': true }, { 'order': '4', 'name': 'CONNECT_TYPE_show', 'displayname': '呼叫类型', 'show': true }, { 'order': '5', 'name': 'ERROR_MEMO', 'displayname': '呼入技能组', 'show': true }, { 'order': '6', 'name': 'INVESTIGATE', 'displayname': '满意度', 'show': true }, { 'order': '7', 'name': 'OFFERING_TIME', 'displayname': '呼叫时间', 'show': true }]
        },
        unfoldTitle: [], // 展开收起标题
        isShowFold: true, // 展开收起标题
        callIsShow: false, // 通话评分
        popoverVisableCall: false,    //  座席组件展开时  触发reset方法
        popoverVisableWeb: false,    //  座席组件展开时  触发reset方法
        webChatIsShow: false // 在线咨询评分
      }
    },
    components: {
      // history,
      item,
      Pagination,
      WebchatGrade,
      CallGrade,
      BigImage,
      LabelCascader,
      Affix,
      Unfold,
      headerOption,
      AgentTree,
      BaseTable
    },
    methods: {
      skipChange () {
        this.query()
      },
      getAllCount () {
        this.allCount = 0
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          let form = this.qu
          const more = false
          this.$store.dispatch('webchatSearch1', form).then((res) => {
            this.allCount = res.count
            this.$store.commit('qualityCheck/SET_QUAL_MORE', {more})
          })
        } else {
          let form = this.qu
          const more = false
          this.$store.dispatch('normalCallSearch1', form).then((res) => {
            this.allCount = res.count
            this.$store.commit('qualityCheck/SET_QUAL_MORE', {more})
          })
        }
      },
      labelSelect (data) { // 子组件外抛出来的表单
        this.resetSelect = false
        if (data.type === 'single') {
          this.labelType = 'single'
          delete this.callForm.multiLabel
          this.callForm.singleLabel = data.arr[0] || ''
        } else {
          this.labelType = 'multi'
          this.callForm.multiLabel = data.arr && data.arr[0] ? data.arr : []
          delete this.callForm.singleLabel
        }
      },
      nextGrade () {
        this.isSave = true
        let passId = this.tempList[this.currentIndex]._id
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.$store.dispatch('skipQualitySession', {_id: passId})
        } else {
          this.$store.dispatch('skipQualityCallSheet', {_id: passId})
        }
        this.$store.commit('deleteGraded/qualityCheck', this.currentIndex)
        this.$store.commit('deleteGraded/qualityCheck', 1)
        if (this.tempList.length <= 0) {
          this.$message.success(this.$t('qualityCheck.allRatingFinish'))
          this.webchatDialogShow = false
          this.callDialogShow = false
          this.query()
        } else {
          this.$message.success(this.$t('qualityCheck.nextGrade'))
          this.handle(this.tempList[0])
        }
      },
      saveGrade (gradeObj, SQlabel, monitorType) {
        this.isSave = true
        this.$store.commit('deleteGraded/qualityCheck', this.currentIndex)
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          let data = deepClone(gradeObj)
          data._id = this.currentItem._id
          data.TEMPLATE = this.template._id
          data.values = gradeObj.obj
          let self = this
          data.isQualityCheck = true
          this.$store.dispatch('saveWebchatSheetGrade', {data, currentItem: this.currentItem}).then((res) => {
            if (res.success) {
              self.webchatDialogShow = false
              this.$store.commit('deleteGraded/qualityCheck', 1)
              if (self.tempList.length <= 0) {
                self.$message.success(this.$t('qualityCheck.allRatingFinish'))
                this.query()
              } else {
                self.$message.success(this.$t('qualityCheck.rateSuccessNext'))
                this.handle(self.tempList[0])
              }
            }
          })
        } else if (this.template.type === 'pass') {
          let data = {}
          data.CALL_SHEET_ID = this.currentItemCall.CALL_SHEET_ID
          gradeObj.config.amount = gradeObj.grade.amount
          data.QUALITY_GRADE = gradeObj.config
          data.COMMENTS = gradeObj.grade.COMMENT
          let GRADE_DATA = {}
          GRADE_DATA._id = this.currentItemCall._id
          GRADE_DATA.OFFERING_TIME = this.currentItemCall.OFFERING_TIME
          GRADE_DATA.DISPOSAL_AGENT = this.currentItemCall.DISPOSAL_AGENT
          GRADE_DATA.CALL_NO = this.currentItemCall.CALL_NO
          GRADE_DATA.CALLED_NO = this.currentItemCall.CALLED_NO
          GRADE_DATA.CONNECT_TYPE = this.currentItemCall.CONNECT_TYPE
          GRADE_DATA.ERROR_MEMO = this.currentItemCall.ERROR_MEMO
          GRADE_DATA.CALL_TIME_LENGTH = this.currentItemCall.CALL_TIME_LENGTH
          GRADE_DATA.FILE_SERVER = this.currentItemCall.FILE_SERVER
          GRADE_DATA.RECORD_FILE_NAME = this.currentItemCall.RECORD_FILE_NAME
          GRADE_DATA.INVESTIGATE = this.currentItemCall.INVESTIGATE
          GRADE_DATA.CHILD_INVESTIGATE = this.currentItemCall.CHILD_INVESTIGATE
          GRADE_DATA.GRADE_AMOUNT = gradeObj.config
          GRADE_DATA.COMMENTS = gradeObj.COMMENT
          GRADE_DATA.TEMPLATE = this.template._id
          GRADE_DATA.SQ_LABEL = SQlabel
          GRADE_DATA.monitorType = monitorType
          GRADE_DATA.QC_SUBMIT = false  //   系统抽取 false   座席提交  true
          data.GRADE_DATA = GRADE_DATA
          data.SQ_LABEL = SQlabel
          data.MONITOR_TYPE = monitorType
          let self = this
          this.$store.dispatch('saveCallShellGrade', {data}).then((res) => {
            if (res && res.success) {
              self.callDialogShow = false
              self.qcResectLabel = false
              this.$store.commit('deleteGraded/qualityCheck', 1)
              if (self.tempList.length <= 0) {
                self.$message.success(this.$t('qualityCheck.allRatingFinish'))
                this.query()
              } else {
                self.$message.success(this.$t('qualityCheck.rateSuccessNext'))
                this.handle(self.tempList[0])
              }
            }
          })
        } else {
          let data = {}
          data.CALL_SHEET_ID = this.currentItemCall.CALL_SHEET_ID
          data.QUALITY_GRADE = gradeObj.grade
          data.COMMENTS = gradeObj.COMMENT
          let GRADE_DATA = {}
          GRADE_DATA._id = this.currentItemCall._id
          GRADE_DATA.OFFERING_TIME = this.currentItemCall.OFFERING_TIME
          GRADE_DATA.DISPOSAL_AGENT = this.currentItemCall.DISPOSAL_AGENT
          GRADE_DATA.CALL_NO = this.currentItemCall.CALL_NO
          GRADE_DATA.CALLED_NO = this.currentItemCall.CALLED_NO
          GRADE_DATA.CONNECT_TYPE = this.currentItemCall.CONNECT_TYPE
          GRADE_DATA.ERROR_MEMO = this.currentItemCall.ERROR_MEMO
          GRADE_DATA.CALL_TIME_LENGTH = this.currentItemCall.CALL_TIME_LENGTH
          GRADE_DATA.FILE_SERVER = this.currentItemCall.FILE_SERVER
          GRADE_DATA.RECORD_FILE_NAME = this.currentItemCall.RECORD_FILE_NAME
          GRADE_DATA.INVESTIGATE = this.currentItemCall.INVESTIGATE
          GRADE_DATA.CHILD_INVESTIGATE = this.currentItemCall.CHILD_INVESTIGATE
          GRADE_DATA.GRADE_AMOUNT = gradeObj.grade
          GRADE_DATA.COMMENTS = gradeObj.COMMENT
          GRADE_DATA.TEMPLATE = this.template._id
          GRADE_DATA.SQ_LABEL = SQlabel
          GRADE_DATA.monitorType = monitorType
          GRADE_DATA.QC_SUBMIT = false  //   系统抽取 false   座席提交  true
          data.SQ_LABEL = SQlabel
          data.MONITOR_TYPE = monitorType
          for (let i in gradeObj.obj) {
            GRADE_DATA[i] = gradeObj.obj[i]
          }
          data.GRADE_DATA = GRADE_DATA

          let self = this
          this.$store.dispatch('saveCallGradeForScore', {data}).then((res) => {
            if (res.success) {
              self.callDialogShow = false
              self.qcResectLabel = false
              // 删除tempList评价完的那个
              this.$store.commit('deleteGraded/qualityCheck', 1)
              if (self.tempList.length <= 0) {
                self.$message.success(this.$t('qualityCheck.allRatingFinish'))
                this.query()
              } else {
                self.$message.success(this.$t('qualityCheck.rateSuccessNext'))
                this.handle(self.tempList[0])
              }
            }
          })
        }
      },
      getMoreQualityCheckCallSheet () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.chatForm.menuId = 'quality_check_query'
          delete this.chatForm.cdrId
          if (this.chatForm.beginTime && this.chatForm.beginTime[0] !== null) {
            this.chatForm.beginTimeBegin = getDateTime(this.chatForm.beginTime[0])
          }
          if (this.chatForm.beginTime && this.chatForm.beginTime[1] !== null) {
            this.chatForm.beginTimeEnd = getDateTime(this.chatForm.beginTime[1])
          }
          if (this.chatForm.beginTimeEnd === '' && this.chatForm.beginTimeBegin === '') {
            this.chatForm.beginTime = ''
          }
          if (this.chatForm.createTime) {
            if (typeof this.chatForm.createTime[0] === 'object') {
              this.chatForm.createTimeBegin = getDateTime(this.chatForm.createTime[0])
            } else {
              this.chatForm.createTimeBegin = this.chatForm.createTime[0] || ''
            }
            if (typeof this.chatForm.createTime[1] === 'object') {
              this.chatForm.createTimeEnd = getDateTime(this.chatForm.createTime[1])
            } else {
              this.chatForm.createTimeEnd = this.chatForm.createTime[1] || ''
            }
          }
          this.chatForm.pageSize = 10
          let form = deepClone(this.chatForm)
//          createTime属性查询的时候用不到，所以不传
          delete form.createTime
//          少于5条时，会加载更多列表，此查询为特殊查询，增加ctquery字段
          form.ctquery = true
          this.$store.dispatch('getMoreQualityCheckCallSheet', {data: form, tempList: this.tempList, type: 'webchat', searchType: 'normal'})
        } else {
          this.callForm.cdrId = 'quality_check_query'
          if (this.callForm.beginTime && this.callForm.beginTime[0] !== null) {
            this.callForm.BEGIN_TIME = getDateTime(this.callForm.beginTime[0])
          }
          if (this.callForm.beginTime && this.callForm.beginTime[1] !== null) {
            this.callForm.END_TIME = getDateTime(this.callForm.beginTime[1])
          }
          this.callForm.pageSize = 10
          let form = deepClone(this.callForm)
          this.$store.dispatch('getMoreQualityCheckCallSheet', {data: form, tempList: this.tempList, type: 'call', searchType: 'normal'})
        }
      },
      closeBigImage () {
        this.bigImage.bigImageShow = false
        this.bigImage.url = ''
      },
      shwoBigImage (data) {
        if (this.qualityCheck) {
          return
        }
        this.bigImage.url = data
        this.bigImage.bigImageShow = true
      },
      look (_id) {
        this.paginationRecord.currentPage = 1
        this.countRecord = 0
        this.totalPageRecord = 0
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryRecordWebchatSessionLog(_id, 1)
        } else {
          this.queryRecordCallListenLog(_id, 1)
        }
      },
      queryRecordWebchatSessionLog (_id, page) {
        this.currentId = _id
        this.title = this.$t('qualityCheck.onlineWebchatLog')
        this.listenpp = this.$t('qualityCheck.checkPeople')
        this.listenTime = this.$t('qualityCheck.checkTime1')
        this.$store.dispatch('queryRecordWebchatSessionLog', {'sessionId': _id, 'page': page, 'pageSize': 10}).then(() => {
          console.log(this.$store.state.qualityCheck)
          this.recordList = this.$store.state.qualityCheck.recordList.list
          this.countRecord = this.$store.state.qualityCheck.recordList.count
          this.totalPageRecord = Math.ceil(this.$store.state.qualityCheck.recordList.count / 10) || 0
          this.isShow = true
        })
      },
      queryRecordCallListenLog (_id, page) {
        this.currentId = _id
        this.title = this.$t('qualityCheck.callQualityLookLog')
        this.listenpp = this.$t('qualityCheck.checkPeople')
        this.listenTime = this.$t('qualityCheck.checkTime1')
        this.$store.dispatch('queryRecordCallListenLog', {'CALL_SHEET_ID': _id, 'page': page, 'pageSize': 10}).then(() => {
          console.log(this.$store.state.qualityCheck)
          this.recordList = this.$store.state.qualityCheck.recordList.list
          this.countRecord = this.$store.state.qualityCheck.recordList.count
          this.totalPageRecord = Math.ceil(this.$store.state.qualityCheck.recordList.count / 10) || 0
          this.isShow = true
        })
      },
      off () {
        let play = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (play) {
          play.pause()
        }
        this.webchatDialogShow = false
        this.callDialogShow = false
        this.qcResectLabel = false
        if (this.isSave === true) {
          this.query()
        }
      },
      rest () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          for (let i in this.chatForm) {
            if (i === 'createTime') {
              this.chatForm[i] = this.chatCreateTimeReset()
            } else {
              this.chatForm[i] = ''
            }
          }
          this.activeFinish = ''
        } else {
          for (let i in this.callForm) {
            if(i=='CALL_REPEAT'){
              console.log(this.callForm[i])
              this.callForm[i] = []
            }else{
              this.callForm[i] = ''
            }
          }
          this.resetSelect = true
          this.INVESTIGATE = []
        }
      },
      handle (data) {
        this.currentIndex = 0
        for (let i = 0; i < this.tempList.length; i++) {
          if (this.tempList[i]._id === data._id) {
            this.currentIndex = i
            break
          }
        }
        if (data.REPEAT_CALL) {
          data.repeatCall = data.REPEAT_CALL === '48h' ? this.$t('call.repeatCall48h') : this.$t('call.repeatCall24h')
        } else {
          data.repeatCall = '--'
        }

        var num = this.tempList.length - this.currentIndex
        if (num < 5) {
          setTimeout(this.getMoreQualityCheckCallSheet, 1000)
        }
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.webchatDialogShow = true
          let self = this
          this.$store.dispatch('recordWebchatSessionLog', {_id: data._id})
          self.currentItem = data
          self.webChatIsShow = true
          this.$store.dispatch('queryBusiness', {linkWebchat: data._id, sid: data.sid}).then((response) => {
            if (response && response.length > 0) {
              data.busHistory = [response[0]]
            } else {
              data.busHistory = []
            }
            self.currentItemWebchat = data
          })
          bus.$emit('webchatScoreFetch')
        } else {
          this.$store.dispatch('recordListenLog', {CALL_SHEET_ID: data._id})
          this.callDialogShow = true
          this.qcResectLabel = true
          let self = this
          let pro1 = this.$store.dispatch('queryBusiness', {callId: data._id, customer: data.CUSTOMER_ID})
          let pro2 = this.$store.dispatch('getQualityedCheckCallSheet', {data: data._id})
          Promise.all([pro1, pro2]).then(([rep1, rep2]) => {
            this.recordFileName(data.FILE_SERVER, data.RECORD_FILE_NAME, data.PBX, function (url) {
              data.audio = url
              if (rep1 && rep1.length > 0) {
                data.busHistory = [rep1[0]]
              } else {
                data.busHistory = []
              }
              self.currentItemCall = data
              self.currentItemCall.LABELS = rep2.LABELS || []
              self.refreshCallGrade = Math.random()
              self.callIsShow = true
            })
          })
//          this.$store.dispatch('queryBusiness', {callId: data._id, customer: data.CUSTOMER_ID}).then((res) => {
//            this.recordFileName(data.FILE_SERVER, data.RECORD_FILE_NAME, data.PBX, function (url) {
//              data.audio = url
//              if (res && res.length > 0) {
//                data.busHistory = [res[0]]
//              } else {
//                data.busHistory = []
//              }
//              self.currentItemCall = data
//              self.refreshCallGrade = Math.random()
//              self.callIsShow = true
//            })
//          })
        }
      },
      change (index) {
        if (this.items.length) {
          this.template = this.items[index]
          if (this.items[index].QUALITY_TYPE === 'qualityWebchat') {
            if (this.getWebchatCache === false) {
              this.renderWebchatCache()
            }
//            this.getQualityCheckWebchatSession()
          } else {
            if (this.getCallCache === false) {
              this.renderCallCache()
            }
//            this.getNormalCallsheetData()
          }
        }
      },
      recordFileName (server, name, pbx, callBack) {
        if (!server) {
          callBack('')
          return
        }
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          callBack(server + '/' + name)
        } else if (document.location.protocol === 'https:') {
          if (pbx) {
            getCache('accountPbx', pbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              callBack(server + '/' + name)
            })
          } else {
            callBack(server + '/' + name)
          }
        } else {
          callBack(server + '/' + name)
        }
      },
      chatCreateTimeReset () {
        let nowTime = new Date()
        let mtDate = nowTime.getTime()
        let createStartTime = getFormatDateTime(new Date(mtDate - 3600 * 1000 * 24 * 7)).split(' ')[0] + ' 00:00:00'
        let endTime = getFormatDateTime(new Date()).split(' ')[0] + ' 23:59:59'
        let createArr = [createStartTime, endTime]
        return createArr
      },
      createTimeChange (value) {
        if (!value) {
          this.chatForm.createTime = this.chatCreateTimeReset()
        }
      },
      timeChange (value) {
        if (!value) {
          this.chatForm.beginTimeBegin = ''
          this.chatForm.beginTimeEnd = ''
          this.chatForm.begin = ''
        }
      },
      callTimeChange (value) {
        if (!value) {
          this.callForm.beginTime = ''
          this.callForm.BEGIN_TIME = ''
          this.callForm.END_TIME = ''
        }
      },
      fetchData () {
        this.$store.dispatch('getCache', {type: 'qualityCheckTemplates'}).then((res) => {
          this.items = res
          this.tempStateChange()
//          this.value = this.num
//          this.template = res[this.num]
//          this.change(this.num)
        })
      },
      tempStateChange () {
        this.isSearchState = false
        this.isHaveData = true
        if (this.items.length) {
          if (this.webOrCallTemp === 1) {
            this.items.some((item, index) => {
              if (item.QUALITY_TYPE !== 'qualityWebchat') {
                this.num = index
                this.isHaveData = false
                return item.QUALITY_TYPE !== 'qualityWebchat'
              }
            })
          } else {
            this.items.some((item, index) => {
              if (item.QUALITY_TYPE === 'qualityWebchat') {
                this.num = index
                this.isHaveData = false
                return item.QUALITY_TYPE === 'qualityWebchat'
              }
            })
          }
        }
        //   value 是 模板对应的 index
        this.value = this.num
        this.change(this.value)
        if (!this.once) {
          this.queryList()
        }
        this.once = false
      },
      renderCallCache () {
        this.getCallCache = true
        let self = this
        this.$store.dispatch('getCache', {type: 'callType'}).then((res) => {
          let callTypeListData = deepClone(res)
          callTypeListData = callTypeListData.filter(item => {
            item.code_name = m7Language('globalChineseKey.' + item.code_name, null, true) || item.code_name
            return item
          })
          self.callTypeList = callTypeListData
        })
        this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
          let agents = scopeAgents('qc', res)
          var callAgents = []
          agents.forEach((item) => {
            item.labelCall = item.displayName + '[' + item.exten + ']'
            callAgents.push({value: item._id, label: item.labelCall})
          })
          callAgents.unshift({value: '', label: '--' + this.$t('webchat.webchatAll') + '--'})
          self.callAgentList = callAgents
        })
        this.$store.dispatch('getCache', {type: 'queues'}).then((res) => {
          self.callQueueList = res
        })
        this.$store.dispatch('getCache', {type: 'mailQueues'}).then((res) => {
          self.webchatQueueList = res
        })
        this.$store.dispatch('getCache', {type: 'options'}).then((res) => {
          let _dics = []
          for (let i = 0; i < res.length; i++) {
            var obj = res[i]
            if (obj.name && obj.name === '满意度调查选项') {
              _dics = obj.options || []
              break
            }
          }
          let satisfactionList = []
          for (let n = 0; n < _dics.length; n++) {
            if (_dics[n] && _dics[n].name && _dics[n].options[0]) {
              satisfactionList.push({name: _dics[n].name, value: _dics[n].options[0].name})
            }
          }
          self.satisfactionList = satisfactionList
        })
        this.$store.dispatch('getCache', {type: 'investigate'}).then((res) => {
          let arrFirst = [{label: this.$t('public.all'), value: ''},{label: this.$t('public.unevaluated'), value: 'unevaluated'}]
          self.investigateArray = generateNewKeyValue(res, ['name', 'value', 'children'], ['label', 'value', 'children'], arrFirst)
        })
      },
      renderWebchatCache () {
        this.getWebchatCache = true
        let self = this
        this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
          let agents = scopeAgents('qc', res)
          var webchatAgents = []
          agents.forEach((item) => {
            item.labelCall = item.displayName + '[' + item.exten + ']'
            webchatAgents.push({value: item._id, label: item.labelCall})
          })
          webchatAgents.unshift({value: '', label: this.$t('public.pleasePick')})
          self.agentList = webchatAgents
        })
        this.$store.dispatch('getCache', {type: 'channelDic'}).then((dics) => {
          let _dics = []
          for (var i = 0; i < dics.length; i++) {
            let obj = dics[i]
            if (obj.type === 'webchat') {
              _dics = obj.options || []
              break
            }
          }
          for (var i = 0; i < dics.length; i++) {
            let obj = dics[i]
            if (obj.type === 'webchatCSR') {
              self.appraiseList = obj.options || []
              break
            }
          }
          this.finishOptions = initFinishName(_dics, {})
          let finishKeys = []
          updateAllOptions(_dics, {Arr: this.sessionOptions})
          this.closeOptions = [
            {label: this.$t('webchat.webchatAll'), value: ''}, ...this.sessionOptions,
            {label: this.$t('webchat.addBlack'), value: 'add_black'}
          ]
        })
      },
      getQualityCheckWebchatSession () {
        this.chatForm.menuId = 'quality_check_query'
        if (this.chatForm.beginTime && this.chatForm.beginTime[0] !== null) {
          this.chatForm.beginTimeBegin = getDateTime(this.chatForm.beginTime[0])
        }
        if (this.chatForm.beginTime && this.chatForm.beginTime[1] !== null) {
          this.chatForm.beginTimeEnd = getDateTime(this.chatForm.beginTime[1])
        }
        if (this.chatForm.beginTimeEnd === '' && this.chatForm.beginTimeBegin === '') {
          this.chatForm.beginTime = ''
        }
        if (this.chatForm.createTime) {
          if (typeof this.chatForm.createTime[0] === 'object') {
            this.chatForm.createTimeBegin = getDateTime(this.chatForm.createTime[0])
          } else {
            this.chatForm.createTimeBegin = this.chatForm.createTime[0] || ''
          }
          if (typeof this.chatForm.createTime[1] === 'object') {
            this.chatForm.createTimeEnd = getDateTime(this.chatForm.createTime[1])
          } else {
            this.chatForm.createTimeEnd = this.chatForm.createTime[1] || ''
          }
        }
        let finishArr = this.activeFinish
        if (finishArr && finishArr.length > 0) {
          for (let i = 0; i < finishArr.length; i++) {
            finishArr[i] = finishArr[i].split('__')[0]
          }
        }
        this.chatForm.finishKey = finishArr[finishArr.length - 1]
        this.chatForm.pageSize = 10
        this.webLoading = true
        let _qu = deepClone(this.chatForm)
        _qu.queryCount = true
        this.qu = _qu
        this.allCount = 0
        let data = deepClone(this.chatForm)
        delete data.createTime
        data.searchType = 'normal'
        if(!data._id){
          delete data._id
        }
        this.$store.dispatch('webchatSearch', data).then((res) => {
          if (data.page === 1 && this.count) {
            this.chatPages = this.count / 10
          }
          const list = res.list || []
          if (list.length === 0) {
            if (res.more) {
              this.turnPage(1)
            } else {
              if (!res.count) {
                // 第一页且count为0是不再发请求
                this.pagination.currentPage = 1
                this.chatForm.morePage = 1
              } else {
                let page = Math.ceil(res.count / data.pageSize)
                this.chatForm.page = page
                this.pagination.currentPage = page
                this.turnPage(page)
                return false
              }
            }
          }
          this.isSearchState = true
          this.webLoading = false
          console.log(res)
          let listArr = []
          for (let i = 0;i < res.list.length;i++) {
            let item = deepClone(res.list[i])
            if (item.finishKey) {
              item.finishReasonTitle = this.finishOptions[item.finishKey] || ''
            } else {
              item.finishReasonTitle = ''
            }
            listArr.push(item)
          }
          this.tableData = listArr
          this.tableDataHeader = res.tableHeader
        })
      },
      getNormalCallsheetData () {
        this.callForm.cdrId = 'quality_check_query'
        if (this.callForm.beginTime && this.callForm.beginTime[0] !== null) {
          if (typeof this.callForm.beginTime[0] === 'string') {
            this.callForm.BEGIN_TIME = this.callForm.beginTime[0]
          } else {
            this.callForm.BEGIN_TIME = getDateTime(this.callForm.beginTime[0])
          }
        }
        if (this.callForm.beginTime && this.callForm.beginTime[1] !== null) {
          if (typeof this.callForm.beginTime[1] === 'string') {
            this.callForm.END_TIME = this.callForm.beginTime[1]
          } else {
            this.callForm.END_TIME = getDateTime(this.callForm.beginTime[1])
          }
        }
        this.callForm.pageSize = 10
        let data = deepClone(this.callForm)
        this.callLoading = true
        let _qu = deepClone(data)
        _qu.queryCount = true
        this.qu = _qu
        this.allCount = 0
        data.searchType = 'normal'
        this.$store.dispatch('normalCallSearch', data).then((res) => {
          if (data.page === 1 && this.count) {
            this.callPages = this.count / 10
          }
          const list = res.list || []
          if (list.length === 0) {
            if (res.more) {
              this.turnPage(1)
            } else {
              if (!res.count) {
                // 第一页且count为0是不再发请求
                this.callForm.page = 1
                this.callForm.morePage = 1
                this.pagination.currentPage = 1
              } else {
                const page = Math.ceil(res.count / data.pageSize)
                this.callForm.page = page
                this.pagination.currentPage = page
                this.turnPage(page)
                return false
              }
            }
          }
          this.isSearchState = true
          this.callLoading = false
          this.tableData = list
          this.tableData.forEach(item => {
              if (item.INVESTIGATE || item.INVESTIGATE === 0) {
                for (let n = 0; n < this.investigateArray.length; n++) {
                  if (this.investigateArray[n].value === item.INVESTIGATE) {
                    item.INVESTIGATE_show = this.investigateArray[n].label || ''
                    if (item.CHILD_INVESTIGATE || item.CHILD_INVESTIGATE === 0) {
                      if (this.investigateArray[n].children.length > 0) {
                        this.investigateArray[n].children.forEach(one => {
                          if (one.value === item.CHILD_INVESTIGATE) {
                            item.INVESTIGATE_show = item.INVESTIGATE_show + '/' + one.label
                          }
                        })
                      }
                    }
                    break
                  }
                }
              }
          })
          this.tableDataHeader = res.tableHeader
        })
      },
      queryList () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.chatForm.page = 1
          this.chatForm.morePage = 1
        } else {
          this.callForm.page = 1
          this.callForm.morePage = 1
        }
        this.pagination.currentPage = 1
        this.query()
      },
      query () {
        // this.pagination.currentPage = 1
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          // this.chatForm.page = 1
          // this.chatForm.morePage = 1
          this.$refs.chatForm.validate((valid) => {
            if (valid) {
              this.getQualityCheckWebchatSession()
              this.isSave = false
            }
          })
        } else {
          // this.callForm.page = 1
          // this.callForm.morePage = 1
          if (!this.$refs.callForm) {
            return
          }
          this.$refs.callForm.validate((valid) => {
            if (valid) {
              if (Number(this.callForm.CALL_TIME_LENGTH_BEGIN) && Number(this.callForm.CALL_TIME_LENGTH_END) && Number(this.callForm.CALL_TIME_LENGTH_BEGIN) >= Number(this.callForm.CALL_TIME_LENGTH_END)) {
                this.$message.error(this.$t('qualityCheck.PleaseEnterTheCorrectCallDurationRrange'))
                return
              }
              this.getNormalCallsheetData()
              this.isSave = false
            } else {
            }
          })
        }
      },
      turnPage (pageNum) {
        this.allCount = 0
        this.pagination.currentPage = pageNum
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.chatForm.page = pageNum
          //   翻页  morePage
          let morePage = 1
          if (pageNum > 1) {
            morePage = Math.floor(pageNum / this.chatPages + 1)
          }
          this.chatForm.morePage = morePage
          this.getQualityCheckWebchatSession()
        } else {
          //   翻页  morePage
          let morePage = 1
          if (pageNum > 1) {
            morePage = Math.floor(pageNum / this.callPages + 1)
          }
          this.callForm.morePage = morePage
          this.callForm.page = pageNum
          this.getNormalCallsheetData()
        }
      },
      turnPageRecord (pageNum) {
        this.paginationRecord.currentPage = pageNum
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryRecordWebchatSessionLog(this.currentId, pageNum)
        } else {
          this.queryRecordCallListenLog(this.currentId, pageNum)
        }
      },
      setHeaderConfig () {
        if (this.template.QUALITY_TYPE !== 'qualityWebchat') {
          this.$store.dispatch('getReportTableHeader', 'quality_call_table_title').then((res) => {
            this.headOptions = res
            this.tableConfigType = 'quality_call_table_title'
            this.isShowTableConfig = !this.isShowTableConfig
          })
        } else {
          this.$store.dispatch('getReportTableHeader', 'quality_webchat_table_title').then((res) => {
            this.headOptions = res
            this.tableConfigType = 'quality_webchat_table_title'
            this.isShowTableConfig = !this.isShowTableConfig
          })
        }
      },
      closeTableConfig (data) {
        this.isShowTableConfig = false
        if (data === 'save') {
          this.query()
        }
      },
      closeFollowedWebchatAgents (agent) {
        this.chatForm.user = this.chatForm.user.filter((item) => item !== agent)
      },
      closeFollowedAgents (agent) {
        this.callForm.DISPOSAL_AGENT = this.callForm.DISPOSAL_AGENT.filter((item) => item !== agent)
      },
      popoverShow () {
        this.$refs.agentTree.setCheckedKeys()
      },
      popoverWebchatShow () {
        this.$refs.agentTreeWebchat.setCheckedKeys()
      },
      saveFollowedAgents (agents) {
        this.callForm.DISPOSAL_AGENT = deepClone(agents)
        document.getElementsByTagName('body')[0].click()
      },
      saveFollowedWebchatAgents (agents) {
        this.chatForm.user = deepClone(agents)
        document.getElementsByTagName('body')[0].click()
      },
//      二级满意度条件
      changeData (selectValue) {
        console.log(selectValue)
        if (Array.isArray(selectValue)) {
          this.callForm.INVESTIGATE = selectValue[0]
          if (selectValue.length > 1) {
            this.callForm.CHILD_INVESTIGATE = selectValue[1]
          } else {
            this.callForm.CHILD_INVESTIGATE = selectValue[1] = ''
          }
        }
      }
    },
    beforeMount () {
      this.renderCallCache()
      this.renderWebchatCache()
      let nowTime = new Date()
      let mtDate = nowTime.getTime()
      let startTime = getFormatDateTime(new Date(mtDate - 3600 * 1000 * 24 * 30)).split(' ')[0] + ' 00:00:00'
      let endTime = getFormatDateTime(new Date()).split(' ')[0] + ' 23:59:59'
      let arr = [startTime, endTime]
      this.callForm.beginTime = arr
      this.chatForm.createTime = this.chatCreateTimeReset()
      this.fetchData()
      this.callForm.page = 1
      this.callForm.morePage = 1
      this.chatForm.page = 1
      this.chatForm.morePage = 1
      this.getNormalCallsheetData()
      if (isHasFunc('func_call_quality_agent', this.$store.state.session.user)) {
        this.callAgentShow = true
      }
    },
    activated () {
      this.query()
    },
    computed: {
      count () {
        if (this.$store.state.qualityCheck.searchList.more) {
          this.moreNorFlag = true
        } else {
          this.moreNorFlag = false
        }
        return this.$store.state.qualityCheck.searchList.count
      },
      totalPage () {
        return Math.ceil(this.$store.state.qualityCheck.searchList.count / 10) || 0
      },
      followedAgents () {
        let agents = this.callForm.DISPOSAL_AGENT || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item, label: agentsAll[item].displayName}
        })
      },
      followedWebchatAgents () {
        let agents = this.chatForm.user || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item, label: agentsAll[item].displayName}
        })
      },
      singleLabelChange () {
        return this.$store.state.qualityCheck.singleLabelChange
      },
      tempList () {
        return this.$store.state.qualityCheck.tempList
      }
    },
    watch: {
      singleLabelChange () {
        this.isSave = true
      },
      refresh (cur, old) {
        if (cur === 'normal') {
//          this.query()
        }
      }
    }
  }
  function generateNewKeyValue (list, oldKeys, newKeys, label, flag, currentType) { // 数据类型转换
    let result = []
    if (!Array.isArray(list) || !Array.isArray(oldKeys) || !Array.isArray(newKeys) || oldKeys.length !== newKeys.length) {
      return result
    }
    if (Array.isArray(label)) {
      result = deepClone(label)
    } else if (label) {
      result = [{label: label, value: ''}]
    }
    for (let i = 0; i < list.length; i++) {
      let item = {}
      if (flag) {
        list[i].code_name = m7Language('globalChineseKey.' + list[i].code_name, null, true) || list[i].code_name
      }
      for (let j = 0; j < oldKeys.length; j++) {
        let oldKey = oldKeys[j]
        let newKey = newKeys[j]
        // 递归处理多级数据
        if (Array.isArray(list[i][oldKey])) {
          if (list[i][oldKey].length > 0) {
            item[newKey] = generateNewKeyValue(list[i][oldKey], ['name', 'value'], ['label', 'value'])
          }
        } else {
          item[newKey] = list[i][oldKey]
        }
      }
      result.push(item)
    }
    return result
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .webchatFinish
    width 100%
  .search-pagination
    float right
  .normal
    height calc(100vh - 158px)
    padding 20px 20px 0
    overflow scroll
    .demo-form-inline
      .el-form-item
        width 100%
        height 100%
        .el-select, .el-date-editor, .el-input
          width 100%
          height 100%
    .ui-affix
      /*padding-bottom 0*/
      margin-top 20px
    .tables
      padding-bottom 30px
    .el-dialog
      .scoring
        text-align center
        color $cf-white
        margin-top 40px
        span
          display inline-block
          padding 10px 26px
          border-radius 4px
          cursor pointer
        .off
          background $c-sub
        .save
          background $c-main
          margin-left 40px
      .el-row
        margin-top 12px
        color #8f8f8f
        .el-col-7
        .el-col-11
          line-height 36px
        .el-col-13
          .totalScore
            color $c-sub
    .chatMsgCon
      border-bottom 1px solid #eeeff3
    .chat_msg
      padding 14px
      box-sizing border-box
      overflow auto
      height calc( 100vh - 342px + 92px)
    .chat_item
      position relative
      width 70%
      padding-left 50px
    .chat_user_info
      position absolute
      left 0
      top 6px
      .chat_time
           margin -4px 0 0 -5px
    .chat_user_img
      border-radius 50%
      width 40px
      height 40px
      overflow hidden
      background url("../../../public-modules/contact-summary/img/agent.png") no-repeat 50% 50%
      background-size 40px auto
      img
        background $cf-white
    .chat_time
      color #9A9A9A
      width 60px
      line-height 16px
      text-align center
    .chat_content
      max-width 90%
      padding 10px
      position relative
      margin-left 14px
      border-radius 6px
      background #7ACDD1
      display inline-block
      color $cf-white
      .chat_img
        max-width 100px
      .send_status
        position absolute
        width 26px
        height 26px
        border-radius 50%
        left -30px
        top 50%
        margin-top -13px
      .send_status.process
        background url('../../webchat/img/webchat_send.gif') no-repeat
        background-size 26px 26px
      .send_status.failure
        color $c-pink
        text-align center
        line-height 24px
        font-size 24px
      .chat_content_text
        word-break break-all
    .chat_content_arrow
      position absolute
      left -6px
      width 0
      height 0
      border-top 6px solid transparent
      border-bottom 6px solid transparent
      border-right 6px solid #7ACDD1
    .chat_user_info_out
      position absolute
      right 0
      top -2px
      .chat_time
        position absolute
        right -5px
        top 46px
    .chat_item.out
      padding 0 50px 0 0
      float right
      .chat_user_img
        border-radius 50%
        width 40px
        height 40px
        float right
      .chat_content
        float right
        background #F2F2F2
        margin 0 14px 0 0
        color $cf-gray0
    .chat_content_arrow_out
      position absolute
      right -6px
      width 0
      height 0
      border-top 6px solid transparent
      border-bottom 6px solid transparent
      border-left 6px solid #F2F2F2
    .chat_item.system
      text-align center
      padding 0
      width 100%
      .chat_content
        display inline-block
        width auto
        height 26px
        border-radius: 13px
        text-align center
        display inline-block
        padding 0
        line-height 26px
        background #f2f2f2
        color $cf-gray0
    .chat_msg_con
      textarea
        resize none
    .el-form-item
      margin 0
    .replyMsg
      float right
    .msg_do
      margin 0 10px 0
      float left
      color #bbb
    .fontSize
      min-width 20px
    .fontSize
      li
        line-height 28px
    .upload
      display inline-block
      width 22px
    .blacklist_con
      resize none
    .other_msg
      padding-top 5px
      .iconfont
        font-size 18px
        cursor pointer
      .iconfont:hover
        color $c-main
      .icon-zhishikujiansuo
        font-size 20px
    .upload
      width 20px
    .chat_info
      padding-top 2px
      .chat_info_todo
      .chat_info_all
        padding 0 14px
        box-sizing border-box
    .chat_info_li_title , .chat_auxiliary_title,.chat_info_all i
      color #b8b8b8
      font-style normal
    .chat_info_li_con , .chat_auxiliary_from
      color $cf-level2
      float right
    .chat_info_li_remarks
      resize none
      font-size 12px
      box-sizing border-box
      width 100%
      margin-top 6px
      border-radius 4px
      padding 6px 10px
    .el-tree
      border none
    .quickreplay_custome_title
      span
        float right
        font-size 12px
        line-height 20px
        cursor pointer
    .quickreplay_li
      .edit_del
        position absolute
        right 4px
        top 0
    .quickRe
      display none
      color $c-main
      float right
      margin-right 4px
      cursor pointer
    .quickReLi
      width 100%
      position relative
      box-sizing border-box
      padding 2px 0 2px 20px
      color $cf-level3
    .quickReLi:before
      content '\ '
      background $c-sub
      width 4px
      height 4px
      position absolute
      left 10px
      top 6px
    .quickReBox
      position absolute
      right 0
      top 0
    .quickReLi:hover
      padding-right 40px
      .quickRe
        display inline-block
    .quickreplay_custom_con
      li
        margin-bottom 4px
        position relative
    .quickreplay_custom_con
      li
        i
          line-height 16px
    .quickreplay_box
      .el-tree
        .is-leaf
          display none
    .color
      color #1f2d3d
    .quickreplay_box
      color #a7a7a7
    .popover1
      .quickReLi:before
        display none
    .popover1
      .quickReLi
        padding-left 18px
    .transfer_li
      color #989898
      height 16px
      padding 3px 0
      cursor pointer
    .transfer_li:hover
      background $c-card
      .transfer_btn
        display inline-block
    .transfer_btn
      display none
      color $c-main
      cursor pointer
      float right
      margin-right 6px
    .transfer_li_ul .transfer_li
      padding-left 18px
    .msg_li
      min-height 62px
      margin-bottom 20px
    .msg_li.system_li
      height 24px
      margin 10px 0
    .transfer_li_box
      position relative
    .transfer_group_btn
      position absolute
      top 4px
      right 0
    .box1:hover
      .transfer_group_btn
        display inline-block
    .box1:hover
      .transfer_li
        background $c-card
    .send_msg_form
      position relative
      textarea
        width 100%
        border none
        box-sizing border-box
        resize none
    .font12
      font-size 12px
    .font14
      font-size 14px
    .font16
      font-size 16px
    .font18
      font-size 18px
    .font20
      font-size 20px
    .suggest
      width 308px
      background $cf-white
      bors(1px,#eee)
    .client_msg
      height 36px
    .chat_info_all
      padding-top 18px
    .transfer_li_ul
      .transfer_li
        .cata-name
          display inline-block
          width 100%
    .cursor_li
      cursor pointer
    .webchat_todo_conbox
      .basic_info
        padding-top 14px
        max-height calc( 100vh - 330px)
        box-sizing border-box
        overflow auto
        h3
          margin-bottom 10px
    .wxend
      text-align center
      padding 5px
      display block
      z-index 10000
      color $cf-level2
    .historyDivied
      color grey
      text-align center
    .popover1 .tree,.popover2 .tree
      overflow-y auto
      max-height 200px
      font-size 12px
    .quickreplay_box
      .quickBoxTit
        padding 0 0 8px
      .quickreplay_custome_title
        padding 14px 0 8px
      .tree
        padding-left 10px
        .cursor_li
          padding 2px 0
        .quickReLi:before
          top 8px
    .chat_info,.chat_info_all
      h3
        color $cf-level1
      .chat_info_li
        margin-bottom 4px
        padding-right 4px
        box-sizing border-box
      .chat_info_li:last-child
        margin-bottom 10px
      .chat_info_li.chat_info_li_title
        display inline-block
    .chat_info_all
      height calc( 100vh - 286px)
      h3
        padding-bottom 16px
    .chat_info_ul
      margin-bottom 10px
      span
        float right
    .popover1_inpit
    .popover2_input
      background-color $cf-white
      border-radius 4px
      border 1px solid #c0ccda
      color #1f2d3d
      display block
      font-size inherit
      height 36px
      line-height 1
      padding 3px 10px
      width 100%
      box-sizing border-box
    .icon-tishi
      color $c-pink
    .chat_content.image
      img
        cursor pointer
    .img_action_kmsearch
      display none
    .webchat_todo_conbox
      .chat_item.in
        .chat_text_con
          .chat_content
            position relative
            max-width 360px
            transition padding-right 0.2s ease
            .img_action_kmsearch
              color $c-card
              position absolute
              right 6px
              bottom 10px
              display none
              transition 0.2s ease
              opacity 0
              cursor pointer
          .chat_content:hover
            padding-right 30px
            .img_action_kmsearch
              display block
              animation mymove 0.2s 0.05s forwards
    .remarks
      border-radius 3px
      width 100%
      margin-top 9px
      box-sizing border-box
      color $cf-level2
      padding 4px 6px
      background #fafafa
      border 1px solid #ddd
    .detail-wrap
      margin 20px 34px 0 34px
      color $cf-level2
    .icon
      cursor pointer
    .deploy
      height 48px
      border 1px solid #e7e7eb
      border-bottom none
      padding-left 14px
      .table-header-config
        float left
        line-height 42px
        .iconfont
          font-size 18px
          color $c-main
          float left
        .tex
          cursor pointer
          margin-left 10px
      .page
        margin-top 10px
      .el-pagination
        padding 0
    .top
      .el-radio
        margin 0 0 0px 20px
      .temp
        color $cf-gray1
        display inline-block
        margin-bottom 20px
      .sear
        /*margin-top 20px*/
        .el-row
          padding-bottom 20px
          span
            color $cf-level1
            display inline-block
            margin-left 20px
          .follow-agent
            color #fff
            margin 0 0 8px 8px
            font-size 12px
          .temp
            color $cf-gray1
            margin-left 0
          .takeTime
            margin-left 20px
      .el-select
        margin-right 10px
      .sub
        text-align right
        .search
          margin-left 24px
    .title
      color $cf-level2
      margin 28px 0 18px 0
      font-weight normal
      position relative
      line-height 16px
      .sign
        position relative
        width 12px
        height 12px
        background #7ccdd1
        display inline-block
        z-index 3
      .text
        position relative
        display inline-block
        padding 0 8px 0 10px
        background $cf-white
        z-index 3
      &:after
        content ""
        display inline-block
        width 100%
        left 0
        border-bottom 1px dashed $cf-level2
        position absolute
        top 50%
  .icon-tixingweizhi
    display inline-block
    font-size 12px
    color $c-main
    line-height 14px
    height 14px
    width 14px
    text-align center
    border-radius 50%
    border 1px solid $c-main
  .padding
   padding-bottom 5px
  .check-padding
    padding-bottom 5px
  .condition-form
    width 200px
    height 36px
  .normal .top .sear .label-select-wrap .select-wrap
    margin-left 0px
  .select-wrap
    width 100%
    /deep/.el-cascader
       width 100%
  .p-styl
    margin-bottom: 20px;
    color: $cf-gray1
  .ui-unfold-span
    cursor pointer
    color $c-main
    margin-left 20px
  .follow-agent-wrap
    float left
    width 386px
    cursor pointer
    border-radius 5px
    border 1px solid #dcdfe6
    padding 8px 8px 6px 4px
    margin-top 6px
    overflow hidden
  .follow-common
    float left
    position relative
    line-height 24px
    background-color #7ab8f3
    margin 0 0 10px 10px
    padding 0 10px
    color #fff
    border-radius 4px
  .follow-agent-add
    cursor pointer
  .el-icon-close
    font-size 12px
  .follow-agent
    &:hover
      .el-icon-close
        display block
    .el-icon-close
      display none
      position absolute
      right -10px
      top -10px
      width 24px
      height 24px
      font-size 12px
      line-height 24px
      transform scale(0.6)
      text-align center
      color #fff
      background-color #0f99fc
      border-radius 50%
      border 1px solid #cce6ff
      cursor pointer
  .follow-agent-wrap-btn
    display block !important
    line-height 0px
    float right
    cursor pointer
    color $c-main
</style>
